.video-content-page {
  //background-color: #f7f8fb;
  .video-content-page-header {
    z-index: 99999;
    display: flex;
    flex-direction: column;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    .tabs {
      width: 100%;
      white-space: nowrap;
      overflow-x: auto;
      background-color: #fff;
      .tabs-items  {
        position: relative;
        display: inline-block;
        padding: 20rpx 40rpx;
        margin-right: 20rpx;
        font-size: 36rpx;
        text-align: center;

        &.active {
          color: #cc4c3c;
          &::before {
            width: calc(100% - 86%);
          }
        }
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 5rpx;
          background-color: #cc4c3c;
          border-radius: 10rpx;
          transition: width 0.3s ease;
        }
      }
    }
    .tab-container-search {
      margin:  40rpx 0;
      padding: 0 20rpx;
      input {
        height: 80rpx;
        background-color: #f1f2f6;
        padding-left: 40rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
        color: #9499a4;
      }
    }
  }

  .tab-container {
    font-size: 40rpx;
    .tab-container-group {
      padding: 20rpx 10rpx;
      background-color: #f7f8fb;
      .tab-container-group-userSelf {
        display: flex;
        align-items: center;
        padding: 20rpx 10rpx;

        image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }

        text {
          margin-left: 20rpx;
        }
      }
      .tab-container-group-video {
        padding: 20rpx 10rpx;
        video, image {
          width: 100%;
          border-radius: 20rpx;
          height: 400rpx;
        }
      }
    }
  }
}